<template>
  <div id="index">
    <Head />
    <div class="content">
      <div class="left">
        <ul>
          <li style="font-weight: bold">
            分类
            <span
              style="background-color: #ff4401; color: #fff; border-radius: 5px"
              >NEW</span
            >
          </li>
          <li @click="selectRouter('手机')">
            <i
              class="iconfont icon-shouji"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >手机
          </li>
          <li @click="selectRouter('女装')">
            <i
              class="iconfont icon-nvzhuang"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >女装
          </li>
          <li @click="selectRouter('鲜花')">
            <i
              class="iconfont icon-xianhua"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >鲜花
          </li>
          <li @click="selectRouter('食品')">
            <i
              class="iconfont icon-shipinleimu"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >食品
          </li>
          <li @click="selectRouter('游戏电视')">
            <i
              class="iconfont icon-dianqi"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >游戏电视
          </li>
          <li @click="selectRouter('图书')">
            <i
              class="iconfont icon-tushu"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >图书
          </li>
          <li @click="selectRouter('家具')">
            <i
              class="iconfont icon-jiaju-"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >家具
          </li>
          <li @click="selectRouter('电脑')">
            <i
              class="iconfont icon-bijiben"
              style="font-size: 16px; margin-right: 5px"
            ></i
            >电脑
          </li>
        </ul>
      </div>
      <div class="center">
        <div class="center_container">
          <div class="head">
            <ul style="font-weight: bold">
              <li @click="selectRouter('小米品牌')" style="color: red">
                小米品牌
              </li>
              <li @click="selectRouter('华为品牌')">华为品牌</li>
              <li @click="selectRouter('鲜花食品')" style="color: green">
                鲜花食品
              </li>
              <li @click="selectRouter('美妆补水')" style="color: #ff0036">
                美妆补水
              </li>
              <li @click="selectRouter('联想品牌')">联想品牌</li>
              <li @click="selectRouter('京东优选')">京东优选</li>
            </ul>
          </div>
          <div class="main">
            <div class="main_left">
              <div class="block" style="height: 380px; width: 280px">
                <el-carousel height="380px" style="border-radius: 15px">
                  <el-carousel-item
                    v-for="item in responseImage"
                    :key="item.id"
                  >
                    <el-image
                      style="width: 280px; height: 380px; border-radius: 15px"
                      :src="item.imgSrc"
                      :id="item.id"
                      @click="selectDetail(item.id)"
                    ></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="main_center">
              <div class="top">
                <el-image
                  style="width: 280px; height: 180px; border-radius: 15px"
                  v-if="reponseImgAndPrice && reponseImgAndPrice.length > 0" 
                  :src="reponseImgAndPrice[0].imgSrc"
                  :id="reponseImgAndPrice[0].id"
                  @click="selectDetail(reponseImgAndPrice[0].id)"
                ></el-image>
              </div>
              <div class="bottom">
                <div class="b_left">
                  <el-image
                    style="width: 130; height: 180px; border-radius: 15px"
                    v-if="reponseImgAndPrice && reponseImgAndPrice.length > 0" 
                    :src="reponseImgAndPrice[1].imgSrc"
                    :id="reponseImgAndPrice[1].id"
                    @click="selectDetail(reponseImgAndPrice[1].id)"
                  ></el-image>
                </div>
                <div class="b_right">
                  <el-image
                    style="width: 130px; height: 180px; border-radius: 15px"
                    v-if="reponseImgAndPrice && reponseImgAndPrice.length > 0" 
                    :src="reponseImgAndPrice[2].imgSrc"
                    :id="reponseImgAndPrice[2].id"
                    @click="selectDetail(reponseImgAndPrice[2].id)"
                  ></el-image>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="r_top">
                <el-image
                  style="width: 280px; height: 180px; border-radius: 15px"
                  v-if="reponseImgAndPrice && reponseImgAndPrice.length > 0" 
                  :src="reponseImgAndPrice[3].imgSrc"
                  :id="reponseImgAndPrice[3].id"
                  @click="selectDetail(reponseImgAndPrice[3].id)"
                ></el-image>
              </div>
              <div class="r_bootom">
                <el-image
                  style="width: 280px; height: 180px; border-radius: 15px"
                  v-if="reponseImgAndPrice && reponseImgAndPrice.length > 0" 
                  :src="reponseImgAndPrice[4].imgSrc"
                  :id="reponseImgAndPrice[4].id"
                  @click="selectDetail(reponseImgAndPrice[4].id)"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_container">
          <div class="top">
            <div class="img">
              <el-image
                style="width: 80px; height: 80px; border-radius: 100px"
                :src="userUrl"
                @click="routerLogin"
              ></el-image>
            </div>
            <span>{{ weclome }}</span>
            <div class="login">
              <el-button
                type="primary"
                size="small"
                @click="login"
                v-show="isvisible"
                >登录</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-show="isvisible"
                @click="login"
                >注册</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="login"
                class="logout"
                v-show="isnotvisible"
                style="padding-left: 19px"
                >退出登录</el-button
              >
            </div>
          </div>
          <div class="center">
            <div class="rec"><span>Titk推荐</span></div>
            <div class="content">
              <div class="block" style="height: 170px; width: 260px">
                <el-carousel height="160px" style="border-radius: 15px">
                  <el-carousel-item v-for="item in responseRec" :key="item.id">
                    <el-image
                      style="width: 260px; height: 170px; border-radius: 15px"
                      :src="item.imgSrc"
                      :id="item.id"
                      @click="selectDetail(item.id)"
                    ></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_body">
      <div class="guess_like">猜你喜欢</div>
      <div class="product_detail">
        <div
          class="product_show"
          v-for="item in responseAll"
          :key="item.id"
          @click="selectDetail(item.id)"
        >
          <div class="show_img">
            <el-image
              style="width: 255px; height: 280px; border-radius: 10px"
              :src="item.imgSrc"
            ></el-image>
          </div>
          <div class="title">
            {{ item.title }}
          </div>
          <div class="fee">送运费险</div>
          <div class="price">
            <i
              class="iconfont icon-qian"
              style="font-size: 24px; margin-right: 2px; font-weight: bold"
            ></i>
            {{ item.price }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head.vue";
export default {
  name: "indexView",
  components: {
    Head,
  },

  data() {
    return {
      responseImage: [],
      reponseImgAndPrice: [],
      responseRec: [],
      responseAll: [],
      isvisible: true,
      isnotvisible: false,
      weclome: "Hi!欢迎来到Titk购物",
      page: 1, // 当前页码
      isLoading: false, // 是否正在加载数据
      userUrl:
        "https://ts1.cn.mm.bing.net/th/id/R-C.b948ed75993ff3605b2b6162a22a6bf9?rik=%2bMXHSX5miHSHWQ&riu=http%3a%2f%2fimg.keaiming.com%2fuploads%2fallimg%2f2020052715%2fcsx14kgpsxi.jpeg&ehk=tXnpd%2bBneBx%2fLlDrifP%2fRk2HPifZb3eiQ4fYaiXMUKM%3d&risl=&pid=ImgRaw&r=0",
    };
  },
  methods: {
    selectRouter(name) {
      console.log(name);
    },

    // 随机获取几张轮播图片
    getRandomImage(keyWord) {
      const apiUrl = `api/es/search?key=${keyWord}&page=1&size=10`;
      this.$http.post(apiUrl).then((res) => {
        // 取前三张图片
        this.responseImage = res.data.data.data.slice(0, 3);
      });
    },

    getOnePicture(keyWord) {
      const apiUrl = `api/es/search?key=${keyWord}&page=1&size=10`;
      this.$http.post(apiUrl).then((res) => {
        // 取前5张图片
        this.reponseImgAndPrice = res.data.data.data.slice(0, 5);

      });
    },

    getRecomend(keyWord) {
      const apiUrl = `api/es/search?key=${keyWord}&page=1&size=10`;
      this.$http.post(apiUrl).then((res) => {
        // 取前5张图片
        this.responseRec = res.data.data.data.slice(0, 5);
      });
    },

    routerLogin() {
      this.$router.push("/detail");
    },

    islogin() {
      if (localStorage.getItem("token") !== null) {
        // 控制登录注册按钮的显示和隐藏
        this.isvisible = false;
        this.isnotvisible = true;
        let id = localStorage.getItem("id");
        let url = "/api/user/getUserById/" + id;
        this.$http.get(url).then((res) => {
          if (res.data.code === 200) {
            this.weclome = "Hi!" + res.data.data.username;
            if (res.data.data.avatarImg.includes("http")) {
              this.userUrl = res.data.data.avatarImg;
            } else {
              this.userUrl =
                "http://localhost:8081/uploadimages/" + res.data.data.avatarImg;
            }
          }
        });
      }
    },

    // 获取全部商品
    getAllProduct() {
      let url = "/api/product/page?page=1&size=10";
      this.$http.get(url).then((res) => {
        this.responseAll = res.data.data;
      });
    },
    // 处理滚动事件
    handleScroll() {
      // 页面高度
      let windowHeight = window.innerHeight;
      // 滚动条距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 整个页面的高度
      let documentHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      // 判断是否接近页面底部（这里定义为距离底部100px）
      if (windowHeight + scrollTop + 100 >= documentHeight) {
        // 如果当前没有正在加载数据，就加载更多商品
        if (!this.isLoading) {
          this.loadMore();
        }
      }
    },

    // 加载更多商品
    loadMore() {
      // 设置加载状态为true，避免重复加载
      this.isLoading = true;
      // 发送分页查询请求
      let url = `/api/product/page?page=${this.page + 1}&size=10`;
      this.$http.get(url).then((res) => {
        // 将新获取的商品数据追加到responseAll数组中
        this.responseAll = this.responseAll.concat(res.data.data);
        // 更新页码
        this.page++;
        // 加载完成后将加载状态设为false
        this.isLoading = false;
      });
    },
    // 跳转到商品详情页
    selectDetail(id) {
      this.$router.push({
        path: "/productDetail",
        query: {
          productId: id,
        },
      });
    },

    login() {
      this.$router.push("/login");
    },
  },

  mounted() {
    this.getRandomImage("情人节");
    this.getOnePicture("花");
    this.getRecomend("裙子衬衫");
    this.islogin();
    this.getAllProduct();
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },

  beforeDestroy() {
    // 在组件销毁前移除滚动事件监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
#index {
  .content {
    width: 1400px;
    margin: 5px auto;
    border-radius: 15px;
    height: 490px;
    background-color: #fff;

    .left {
      width: 200px;
      height: 490px;
      float: left;

      ul {
        padding-left: 0%;
        width: 160px;
        background-color: #f3f6f8;
        margin: 20px;
        border-radius: 15px;
        li {
          width: 160px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
        li {
          &:hover {
            color: #ff4401;
          }
        }

        li.active {
          color: #ff4401;
        }
      }
    }
    .center {
      width: 920px;
      height: 450px;
      float: left;

      .center_container {
        width: 900px;
        height: 450px;
        border-radius: 15px;
        margin: 20px 0;
        margin-right: 20px;
        .head {
          width: 900px;
          height: 50px;
          background-color: #f3f6f8;
          border-radius: 15px;
          ul {
            li {
              float: left;
              width: 130px;
              height: 50px;
              line-height: 50px;
              text-align: center;
              cursor: pointer;
            }
            li {
              &:hover {
                color: #ff4401 !important;
              }
            }
          }
        }

        .main {
          width: 900px;
          height: 380px;
          .main_left {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;
            margin-right: 27px;
          }
          .main_center {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;
            margin-right: 27px;
            background-color: #f3f6f8;
            .top {
              width: 280px;
              height: 180px;
              border-radius: 15px;
            }

            .bottom {
              width: 280px;
              height: 180px;
              border-radius: 15px;
              margin-top: 20px;

              .b_left {
                width: 130px;
                height: 180px;
                border-radius: 15px;
                float: left;
                margin-right: 20px;
              }
              .b_right {
                width: 130px;
                height: 180px;
                border-radius: 15px;
                float: left;
              }
            }
          }
          .main_right {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;

            .r_top {
              width: 280px;
              height: 180px;
              border-radius: 15px;
            }

            .r_bootom {
              width: 280px;
              height: 180px;
              border-radius: 15px;
              margin-top: 20px;
            }
          }
        }
      }
    }

    .right {
      width: 280px;
      height: 450px;
      float: left;
      border-radius: 15px;

      .right_container {
        width: 280px;
        height: 450px;
        border-radius: 15px;
        margin: 20px 0;
        background-color: #f3f6f8;

        .top {
          width: 280px;
          height: 180px;
          border-radius: 15px;
          margin-bottom: 20px;

          .img {
            margin-left: 100px;
          }
          span {
            display: block;
            margin-top: 5px;
            font-size: 13px;
            text-align: center;
          }
          .login {
            margin: 20px auto;
            padding-left: 77px;

            el-button {
              width: 120px;
              margin-left: 80px;
            }
          }
        }

        .center {
          width: 280px;
          height: 250px;
          border-radius: 15px;

          .rec {
            width: 260px;
            height: 50px;
            margin-right: 20px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            background-color: #f3f6f8;
            border-radius: 15px;
          }

          .content {
            width: 260px;
            height: 160px;
            margin-top: 20px;
            .block {
              width: 260px;
              height: 160px;
            }
          }
        }
      }
    }
  }
  .center_body {
    width: 1400px;
    margin: 20px auto;
    border-radius: 15px;
    .guess_like {
      width: 260px;
      text-align: left;
      font-size: 20px;
      font-weight: bold;
    }

    .product_detail {
      width: 1430px;
      background-color: #fff;
      margin-top: 20px;
      .product_show {
        width: 266px;
        height: 400px;
        float: left;
        margin-right: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        transition: transform 0.2s ease-in-out;
        .show_img {
          width: 255px;
          height: 280px;
          border-radius: 15px;
        }
        .title {
          width: 255px;
          height: 60px;
          line-height: 40px;
          text-align: left;
          color: #11192d;
          display: inline-block;
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
          margin-left: 8px;
          margin-right: 8px;
          max-height: 48px;
          margin: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fee {
          width: 255px;
          height: 20px;
          line-height: 20px;
          text-align: left;
          color: #ff4401;
          font-size: 16px;
          padding-left: 8px;
        }
        .price {
          width: 255px;
          height: 50px;
          font-weight: bold;
          line-height: 20px;
          text-align: left;
          color: #ff6200;
          font-family: Alibaba Sans\102, sans-serif;
          font-size: 24px;
          font-weight: 700;
          line-height: 50px;
          padding-left: 8px;
        }
      }
      .product_show:hover {
        animation: shake 0.5s;
      }

      //   晃动动画
      @keyframes shake {
        0% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        50% {
          transform: translateX(5px);
        }
        75% {
          transform: translateX(-3px);
        }
        100% {
          transform: translateX(0);
        }
      }
    }
  }
}
</style>